<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>vue第一天 数据驱动视图</title>
</head>
<body>
	<div id="app">
		<!-- 模版语法 {{ msg }} 注意加空格 免得有坑 -->
		<h2>{{ msg }}</h2>
		<h2>{{ 1+1 }}</h2>
		<h2>{{ isTrue }}</h2>
		<!-- 翻转字符串 线切割 后翻转 再合并 reverse()该方法会改变原来的数组，而不会创建新的数组。颠倒其元素的顺序-->
		<h2>{{ str.split('').reverse().join('') }}</h2>
		<!-- 三元运算符 -->
		<h2>{{ 1>2 ? '真' : '假' }}</h2>
		<!-- 对象 -->
		<h2>{{ '哈哈哈' }}</h2>
		<h2>{{ {name:'张哈哈'} }}</h2>
	</div>
	<!-- 1.引包 -->
	<script src="./node_modules/vue/dist/vue.js" type="text/javascript" ></script>
	<!-- 1.创建实例化对象-->
	<script type="text/javascript">
		let vm = new Vue({
			el: '#app',
			data(){
				return {
				//数据属性
				//既可以是一个对象，也可以是一个函数
				msg: '黄瓜',
				isTrue: 1==1,
				str: 'hello Vue'
				}
			}
			//优先加载template模版
			//template:`<div>{{msg}}</div>`
		});
		console.log(vm)
	</script>
</body>
</html>
